<template>
    <div>
    
    </div>
  </template>
  
  <script setup>

  //toRef如果原始对象是非响应式的就不会更新视图 数据是会变的
  //toRef如果原始对象是响应式的是会更新视图并且改变数据的

  //toRefs可以帮我们批量创建ref对象主要是方便我们解构使用

  //toRaw将响应式对象转化为普通对象
    import { ref, reactive, toRefs, toRef, toRaw } from 'vue';

    // 创建一个响应式对象
    const state = reactive({
        count: 0,
        message: 'Hello'
    });

    // 使用 toRefs 将响应式对象转换为 ref 对象
    const { countRef, messageRef } = toRefs(state);

    console.log(countRef.value);  // 输出：0
    console.log(messageRef.value);  // 输出：Hello

    // 使用 toRef 将响应式对象的属性转换为 ref
    const countRef2 = toRef(state, 'count');

    console.log(countRef2.value);  // 输出：0

    // 使用 toRaw 获取原始对象
    const rawState = toRaw(state);

    // 使用 toRefs 将响应式对象中的所有属性转换为 ref
    const refs = toRefs(state);

    console.log(refs.count.value);  // 输出：0
    console.log(refs.message.value);  // 输出：Hello
  </script>
  